<template>
  <div class="wrapper">
    <div class="echarts" :id="id" :style="{width: '100%', height: '330px'}"></div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import Echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    // console.log("setup---props", props);
    const id = `vue-echarts-${props.id}`;
    let chart = null;
    const initEcharts = () => {
      if (!chart) {
        const dom = document.getElementById(id);
        chart = Echarts.init(dom);
      } else {
        return;
      }
      if (!props.options) return;
      chart.setOption(props.options);
      window.addEventListener("resize",function(){
        console.log("resize")
		    chart.resize();
		});
    };
    onMounted(() => {
        initEcharts();
    });
    return {
      id,
      initEcharts
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>